<template>
	<view class="main">
		<u-navbar
		title="帮助中心"
		title-size="34"
		back-icon-color="#ffffff"
		title-color="#ffffff"
		:border-bottom="false"
		:background="background">
		</u-navbar>
		<view class="content">
			<view class="top" :class="{active:!show}">
				<view class="search" >
					<u-search
					search-icon-color="#FFFFFF"
					color="#FFFFFF"
					placeholder-color="#FFFFFF"
					:show-action='false'
					placeholder="搜索" 
					v-model="keyword"></u-search>
				</view>
				<view class="menu" @tap="show=!show"></view>
				<view class="title">灵活用工平台 - 帮助文档</view>
			</view>
			<view class="btm" :class="{active:!show}">
				<view class="left">
					<scroll-view :scroll-y="true" class="scroll-Y">
					    <view class="h1">
							<view class="title">欢迎</view>
							<view class="h2">
								<view class="title">简介</view>
								<view class="title">使命</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="right">
					<view class="breadcrumb">
						<text>首页 </text>
						<text> 》</text>
						<text>欢迎</text>
					</view>
					<u-parse :html="content"></u-parse>
				</view>
			</view>
		</view>
		<view class="sidebar">
			<view class="cont">
				<text>在线</text>
				<text>咨询</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				background: {
					backgroundColor:"#4A90E2"
				},
				show:false,
				keyword:'',
				menuList:[],
				content: `
					<h1>标题H1</h1>
					<p>露从今夜白，月是故乡明</p>
					<h2>标题H2</h2>
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
					<h1>标题H1</h1>
					<p>露从今夜白，月是故乡明</p>
					<h2>标题H2</h2>
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
					<h1>标题H1</h1>
					<p>露从今夜白，月是故乡明</p>
					<h2>标题H2</h2>
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
					<h1>标题H1</h1>
					<p>露从今夜白，月是故乡明</p>
					<h2>标题H2</h2>
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
					<h1>标题H1</h1>
					<p>露从今夜白，月是故乡明</p>
					<h2>标题H2</h2>
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
				`
			}
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		onPullDownRefresh() {
		    console.log('refresh');
		    setTimeout(function () {
		        uni.stopPullDownRefresh();
		    }, 1000);
		},
		methods: {
			//返回
			black(){
				uni.navigateBack()
			},
			toPage(url,islogin=false){
				this.more_show = false
				if(islogin){
					uni.navigateTo({
					    url: '/pages/Login/index'
					});
					return
				}
				uni.navigateTo({
				    url: url
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		min-height: 100vh;
		background-color: #f9f9f9;
		.header{
			padding: 0 30rpx;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #FFFFFF;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 34rpx;
			.title{
				font-size: 34rpx;
			}
			.ritbtn{
				font-size: 28rpx;
				position: relative;
				z-index: 999999;
			}
		}
		.content{
			overflow: hidden;
			.top{
				width: calc(200vw - 116rpx);
				height: 116rpx;
				background: #377CCE;
				padding: 0 0 0 30rpx;
				box-sizing: border-box;
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				transition: 0.35s;
				.search{
					width: calc(100vw - 150rpx);
					border-bottom: 1rpx solid #E6E6E6;
					/deep/.u-content{
						background-color: transparent!important;
						border-radius: 0!important;
						.u-input{
							background-color: transparent!important;
						}
					}
				}
				.menu{
					width: 116rpx;
					height: 116rpx;
					background: url(../../static/image/ico/daohangfaxian1@2x.png)center center no-repeat;
					background-size: 50rpx 52rpx;
				}
				.title{
					width: calc(100vw - 116rpx);
					font-size: 32rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 116rpx;
					text-align: center;
				}
			}
			.active{
				transform: translateX(calc(-100vw + 116rpx));
			}
			.btm{
				width: calc(200vw - 116rpx);
				height: calc(100vh - 116rpx - var(--status-bar-height) - 44px);
				display: flex;
				justify-content:space-between;
				transition: 0.35s;
				.left{
					width:calc(100vw - 116rpx);
					background: #377CCE;
					padding:55rpx 30rpx 0 30rpx;
					.scroll-Y{
						height: 100%;
						.h1{
							margin-top: 10rpx;
							.title{
								font-size: 28rpx;
								font-weight: 500;
								color: #FFFFFF;
								line-height: 40rpx;
							}
							.h2{
								padding: 0 28rpx;
								.title{
									margin-top: 20rpx;
									font-size: 26rpx;
									color: #FFFFFF;
									line-height: 44rpx;
								}
							}
						}
					}
				}
				.right{
					width: 100vw;
					padding: 30rpx;
					background-color: #FFFFFF;
					overflow-y: auto;
					.breadcrumb{
						font-size: 0;
						padding-bottom: 16rpx;
						border-bottom: 1px solid #E6E6E6;
						margin-bottom: 30rpx;
						text{
							font-size: 24rpx;
							font-weight: 400;
							color: #333333;
							line-height: 33rpx;
							&:first-child{
								color: #4A90E2;
							}
							&:nth-child(2){
								margin: 0 10rpx;
							}
						}
					}
				}
			}
		}
		.sidebar{
			width: 120rpx;
			height: 120rpx;
			background: #FFFFFF;
			box-shadow: 0px 2rpx 13rpx 0px rgba(196, 196, 196, 0.5);
			border-radius: 60rpx;
			position: fixed;
			right: 15rpx;
			bottom:15vh;
			font-size: 24rpx;
			font-weight: bold;
			color: #333333;
			display: flex;
			align-items: center;
			justify-content: center;
			text{
				display: block;
			}
		}
	}
</style>
